<template>
    <div>
        <div class="homenavContainer">
            <div class="homenavinner">
                <img style="width:110px;" @click="home" :src="logoinfos.logo" alt="" />
            </div>
            <div class="homenavinner">
                <div
                    @click="navrouter(item,index)"
                    :class="item.color?'navcolor':''"
                    v-for="(item,index) in navData"
                    :key="index"
                >
                    <div>{{item.name}}</div>
                </div>
            </div>
            <div class="homenavinner">
                <div class="avatar">
                    <el-avatar icon="el-icon-user-solid" :size="50" :src="useravatar"></el-avatar>
                </div>
                <div @click="gologin">{{username}}&nbsp;&nbsp;&nbsp;&nbsp;{{tokens!==null?'退出':''}}</div>
            </div>
        </div>
    </div>
</template>



<script>
export default {
    data() {
        return {
            navData: [
                { name: "首页", id: 1, color: false },
                { name: "产品", id: 2, color: true },
                { name: "个人中心", id: 3, color: false },
                { name: "客服中心", id: 4, color: false },
                { name: "手机app", id: 5, color: false }
            ],
            username: "未登录",
            chiosedComponent: null,
            tokens: null,
            useravatar: "",
            logoinfos: {}
        };
    },
    props: ["flag"],
    methods: {
        home() {
            this.$router.push("home");
        },
        navrouter(item, index) {
            if (item.id == 1) {
                this.$router.push("home");
            } else if (item.id == 2) {
                this.$router.push("products");
            } else if (item.id == 3) {
                //this.chiosedComponent = usercenter;
                let mytoken = window.localStorage.getItem("token");
                if (mytoken != null) {
                    this.$router.push("usercenter");
                } else {
                    this.$router.push("loginregister");
                }
            } else if (item.id == 4) {
                //this.chiosedComponent = customerservice;
                this.$router.push("customerservice");
            } else if (item.id == 5) {
                //this.chiosedComponent = applications;
                this.$router.push("applications");
            }
        },
        gologin() {
            let mytoken = window.localStorage.getItem("token");
            this.tokens = mytoken;
            if (mytoken !== null) {
                // 进入首页即检测token是否存在，如果存在但无效，则删除token
                // 所以登录这里判断的时候始终之需要判断token是否存在就可以判断是否有登录
                window.localStorage.removeItem("token");
                this.$store.commit("logout");
            } else {
                this.$router.push("loginregister");
            }
        },
        // 进入页面就尝试获取用户信息存储在store里面---在登录页面也要进行此操作
        getUserInfos() {
            let mytoken = window.localStorage.getItem("token");
            if (mytoken == null) {
                // this.$notify({
                //     message: "检测到用户未登录，部分页面将无法访问！",
                //     type: "warning"
                // });
            } else {
                this.getUser();
            }
        },
        // 不管本地存储有没有token都需要验证一下是否过期，过期则直接删除token
        getUser() {
            this.$ajax
                .get("user/")
                .then(res => {
                    this.$store.commit("updateUserInfos", res.data);
                    this.username = this.$store.state.userInfos.username;
                    //console.log(res.data);

                    this.getUserFavList();
                    this.getUserShopcar();
                    this.getUserOrder();
                    this.getAddress();
                })
                .catch(err => {
                    window.localStorage.removeItem("token");
                });
        },
        getUserFavList() {
            this.$ajax.get("fav/").then(res => {
                let favList = res.data.results;
                this.$store.commit("updateUserFavList", favList);
                //console.log(this.$store.state.userFavList);
            });
        },
        getUserShopcar() {
            this.$ajax.get("shopcar/").then(res => {
                this.$store.commit("updateShopcar", res.data.results);
            });
        },
        getUserOrder() {
            this.$ajax.get("order/").then(res => {
                this.$store.commit("updateUserOrderList", res.data.results);
            });
        },
        // 获取用户收货地址
        getAddress() {
            this.$ajax.get("useraddress/").then(res => {
                //console.log(res.data.results);
                this.$store.commit("updateUserAddress", res.data.results);
            });
        },
        // 获取logo图片
        getLogo() {
            this.$ajax.get("logos/").then(res => {
                //console.log(res.data.results);
                if(res.data.results.length>0){
                    this.logoinfos = res.data.results.pop();
                }else{
                    this.logoinfos = {}
                }
                
                //this.$store.commit("updateUserAddress", res.data.results);
            });
        }
    },
    mounted() {
        this.getUserInfos();
        this.getLogo();
        this.$ajax.get("avatar/").then(res => {
            //console.log(res.data);
            if (res.data.results.length > 0) {
                this.useravatar = res.data.results.pop().avatar;
            }
        });
        if (this.flag == 2) {
            this.chiosedComponent = this.navData.forEach(item => {
                if (item.id == this.flag) {
                    item.color = true;
                } else {
                    item.color = false;
                }
            });
        } else if (this.flag == 1) {
            this.chiosedComponent = this.navData.forEach(item => {
                if (item.id == this.flag) {
                    item.color = true;
                } else {
                    item.color = false;
                }
            });
        } else if (this.flag == 3) {
            this.chiosedComponent = this.navData.forEach(item => {
                if (item.id == this.flag) {
                    item.color = true;
                } else {
                    item.color = false;
                }
            });
        } else if (this.flag == 4) {
            this.chiosedComponent = this.navData.forEach(item => {
                if (item.id == this.flag) {
                    item.color = true;
                } else {
                    item.color = false;
                }
            });
        } else if (this.flag == 5) {
            this.chiosedComponent = this.navData.forEach(item => {
                if (item.id == this.flag) {
                    item.color = true;
                } else {
                    item.color = false;
                }
            });
        }
    }
};
</script>


<style lang="scss" scoped>
.navcolor {
    background-color: greenyellow;
}
.homenavContainer {
    width: 100%;
    height: 75px;
    position: absolute;
    top: 0;
    background-color: white;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    min-width: 1400px;
    font-family: Helvetica, "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑",
        Arial, sans-serif;
    z-index: 999;
    .homenavinner {
        border: none;
    }
    .homenavinner:nth-child(1) {
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: center;
        img {
            cursor: pointer;
        }
    }
    .homenavinner:nth-child(2) {
        width: 60%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        color: #aaaaaa;

        div {
            width: 20%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            transition: all linear 0.2s;
            text-align: center;
            cursor: pointer;
            div {
                width: 100%;
                // padding: 15px;
            }
        }
        div:hover {
            color: black;
            background-color: aliceblue;
            border-radius: 50%;
        }
    }
    .homenavinner:nth-child(3) {
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: center;
        div {
            display: flex;
            margin-left: 5px;
            flex-direction: column;
            justify-content: center;
            // text-decoration: underline;
            cursor: pointer;
        }
    }
}
</style>